import './index.scss'
import { Menu, Tooltip } from 'antd'
import { KeyOutlined, TeamOutlined, DesktopOutlined, ScheduleOutlined } from '@ant-design/icons'
import SvgIcon from '@/components/SvgIcon'
import { Outlet, useNavigate, useLocation } from 'react-router-dom'
import { useEffect, useState } from 'react'

function Index() {
  const navigate = useNavigate()
  const location = useLocation()
  const [defaultnav, setDefaultnav] = useState<any>([])

  type MenuItem = Required<any>['items'][number]
  const items: MenuItem[] = [
    { key: '1', icon: <DesktopOutlined />, label: '工作台' },
    { key: '2', icon: <TeamOutlined />, label: '教师管理' },
    { key: '3', icon: <TeamOutlined />, label: '学生管理' },
    { key: '4', icon: <KeyOutlined />, label: '权限管理' },
    { key: '5', icon: <ScheduleOutlined />, label: '选课管理' },
  ]

  // 点击menu-item进行页面跳转
  const handleClickMenuItem = (num: string) => {
    switch (Number(num)) {
      case 1:
        navigate('/work')
        break
      case 2:
        navigate('/teacher')
        break
      case 3:
        navigate('/user')
        break
      case 4:
        navigate('/limit')
        break
      case 5:
        navigate('/class')
        break
    }
  }

  // 点击退出登录按钮的回调
  const handleLogout = () => {
    navigate('/login')
    localStorage.removeItem('userInfo')
  }

  useEffect(() => {
    switch (location.pathname) {
      case '/work':
        setDefaultnav(['1'])
        break
      case '/teacher':
        setDefaultnav(['2'])
        break
      case '/user':
        setDefaultnav(['3'])
        break
      case '/limit':
        setDefaultnav(['4'])
        break
      case '/class':
        setDefaultnav(['5'])
        break
      default:
        setDefaultnav(['1'])
        break
    }
  }, [location.pathname])

  useEffect(() => {
    !JSON.parse(localStorage.getItem('userInfo') as string) && navigate('/login')
  }, [])

  return (
    <div className="Index">
      <div className="left">
        <div className="icon">
          <img src="/assets/images/font.png" alt="" />
          <span>慧教云</span>
        </div>
        <div className="left-menu">
          <Menu
            onClick={(data: any) => handleClickMenuItem(data.key)}
            selectedKeys={defaultnav}
            mode="inline"
            theme="dark"
            items={items}
          />
        </div>
      </div>
      <div className="right">
        <div className="right-top">
          <img src="/assets/images/header.jpg" alt="" />
          <Tooltip placement="bottom" title="退出登录">
            <div onClick={handleLogout}>
              <SvgIcon name="quit" size="30px" />
            </div>
          </Tooltip>
        </div>
        <div className="right-content">
          <Outlet />
        </div>
      </div>
    </div>
  )
}

export default Index
